<template>
    <view class="slider_header">
        <view class="left_hint">A</view>
        <view class="middle_hint" :style="{ 'font-size': fontsize }">{{ scoreText }}</view>
        <view class="right_hint">A</view>
    </view>

    <view class="slider_content">
        <movable-area class="slider_bar">
            <movable-view class="slider_view" :x="x" :animation='false' direction="horizontal" @change="onChange" />
        </movable-area>

        <view class="dot1 dot" @click.stop="onbai(0)" />
        <view class="dot25 dot" @click.stop="onbai(25)" />
        <view class="dot50 dot" @click.stop="onbai(50)" />
        <view class="dot75 dot" @click.stop="onbai(75)" />
        <view class="dot100 dot" @click.stop="onbai(100)" />
    </view>
</template>

<script>
import { useSystemStore } from '@/stores'
export default {
    data() {
        return {
            slideBarWidth: 0,
            x: 0,
            y: 0,
            fontsize: '',
            pTime: '',
            isUpdating: false,
        };
    },
    computed: {
        scoreText() {
            const that = this
            const w = that.slideBarWidth / 8
            if (that.x <= w) {
                return '小'
            } else if (that.x > w && that.x <= w * 3) {
                return '标准'
            } else if (that.x > w * 3 && that.x <= w * 5) {
                return '大'
            } else if (that.x > w * 5 && that.x <= w * 7) {
                return '超大'
            } else {
                return '最大'
            }
        }
    },
    mounted() {
        var that = this;
        let el = uni.createSelectorQuery().in(this)
        this.$nextTick(() => {
            el.select(".slider_content").boundingClientRect(function (res) {
                const w = res.width / 8
                that.slideBarWidth = res.width
                const system = useSystemStore()
                const s = system.fontsize
                that.fontsize = s
                switch (s) {
                    case '14px':
                        that.x = 0
                        break;
                    case '16px':
                        that.x = w * 2
                        break;
                    case '20px':
                        that.x = w * 4
                        break;
                    case '26px':
                        that.x = w * 6
                        break;
                    default:
                        that.x = that.slideBarWidth
                        break;
                }
            }).exec();
        })
    },

    methods: {
        onbai(e) {
            this.x = e / 100 * this.slideBarWidth
        },

        onChange: function (e) {
            const that = this
            if (that.isUpdating) return
            that.isUpdating = true
            that.pTime = setTimeout(() => {
                clearTimeout(that.pTime)
                that.isUpdating = false

                let el = uni.createSelectorQuery().in(that)
                that.$nextTick(() => {
                    el.select(".slider_content").boundingClientRect(function (res) {
                        that.slideBarWidth = res.width

                        const slideBarWidths = that.slideBarWidth / 8
                        switch (true) {
                            case e.detail.x <= slideBarWidths:
                                that.x = 0
                                that.fontsize = '14px'
                                break;
                            case e.detail.x > slideBarWidths && e.detail.x <= slideBarWidths * 3:
                                that.x = slideBarWidths * 2
                                that.fontsize = '16px'
                                break;
                            case e.detail.x > slideBarWidths * 3 && e.detail.x <= slideBarWidths * 5:
                                that.x = slideBarWidths * 4
                                that.fontsize = '20px'
                                break;
                            case e.detail.x > slideBarWidths * 5 && e.detail.x <= slideBarWidths * 7:
                                that.x = slideBarWidths * 6
                                that.fontsize = '26px'
                                break;
                            default:
                                that.x = that.slideBarWidth
                                that.fontsize = '34px'
                                break;
                        }

                        that.$emit('change', that.fontsize)

                    }).exec();
                })

            }, 10)

        }
    }
}
</script>

<style lang="scss" scoped>
.slider_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12rpx;

    .left_hint {
        font-size: 28rpx;
        color: #000;
    }

    .middle_hint {
        flex: 1;
        margin-left: 40rpx;
        font-size: 32rpx;
        color: #000;
    }

    .right_hint {
        font-size: 62rpx;
        color: #000;
    }
}

.slider_content {
    display: flex;
    width: 100%;
    height: 32rpx;
    position: relative;





    .dot {
        position: absolute;
        width: 3rpx !important;
        height: 20rpx;
        z-index: 1;
        background-color: #C8CED9 !important;
    }

    .dot1 {
        top: 25%;
    }

    .dot25 {
        top: 25%;
        left: 25%;
    }

    .dot50 {
        top: 25%;
        left: 50%;
    }

    .dot75 {
        top: 25%;
        left: 75%;
    }

    .dot100 {
        top: 25%;
        left: 100%;
    }

    &::before {
        content: '';
        position: absolute;
        height: 4rpx;
        border-radius: 8rpx;
        background-color: #C8CED9;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
    }


    .slider_bar {
        height: 100%;
        border-radius: 8rpx;
        width: 100%;
        height: 46rpx;


        .slider_view {
            width: 0;
            height: 100%;
            position: relative;
            z-index: 2;


            &::after {
                content: '';
                left: -46rpx;
                width: 46rpx;
                height: 46rpx;
                position: absolute;
                top: 18rpx;
                left: -23rpx;
                background-color: #fff;
                box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.4);
                border-radius: 50%;
                transform: translatey(-50%);
            }

        }
    }
}
</style>